<template>
    <div class="jianzhuForm">
        <div v-if="step == 1">
            <img src="../../../../../assets/images/system/room/stepOne.png" class="titleImg" />
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属建筑" prop="parentId">
                            <treeSelect
                                :treeProps="props"
                                :options="treeSelectList"
                                v-model="form.parentId"
                                :clearable="isClearable"
                                :accordion="isAccordion"
                                :expandNode="false"
                                size="small"
                                width="100%"
                                @getValue="getValue($event)"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="房间名称" prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="房间人数" prop="personNum">
                            <el-input v-model="form.personNum"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="房间面积" prop="area">
                            <el-input v-model="form.area"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="房间编号" prop="roomNo">
                            <el-input v-model="form.roomNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排序序号" prop="xh">
                            <el-input type="number" v-model="form.xh"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="业主姓名" prop="personName">
                            <el-input v-model="form.personName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="tel">
                            <el-input v-model="form.tel"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="身份策略" prop="sfcl">
                            <el-select v-model="form.sfcl" placeholder="请选择身份策略" style="width: 100%">
                                <el-option label="学生" value="shanghai"></el-option>
                                <el-option label="学生2" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="定价方案" prop="djfa">
                            <el-select v-model="form.djfa" placeholder="请选择定价方案" style="width: 100%">
                                <el-option label="学生" value="shanghai"></el-option>
                                <el-option label="学生2" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="支付商户" prop="zfsh">
                            <el-select v-model="form.zfsh" placeholder="请选择支付商户" style="width: 100%">
                                <el-option label="商户" value="shanghai"></el-option>
                                <el-option label="商户2" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="启用报警" prop="qybj">
                            <el-radio v-model="form.qybj" label="1">禁止</el-radio>
                            <el-radio v-model="form.qybj" label="2">允许</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="报警阈值" prop="bjyz">
                            <el-input v-model="form.bjyz" placeholder="请输入">
                                <i slot="suffix" style="font-style: normal; margin-right: 10px; line-height: 30px; color: #1e1e1e">元</i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="柜台缴费" prop="gtjf">
                            <el-radio v-model="form.gtjf" label="1">禁止</el-radio>
                            <el-radio v-model="form.gtjf" label="2">允许</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="移动充值" prop="ydcz">
                            <el-radio v-model="form.ydcz" label="1">禁止</el-radio>
                            <el-radio v-model="form.ydcz" label="2">允许</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="断点金额" prop="ddje">
                            <el-input v-model="form.ddje" placeholder="请输入">
                                <i slot="suffix" style="font-style: normal; margin-right: 10px; line-height: 30px; color: #1e1e1e">元</i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="物业费到期时间" prop="wyfdqsj">
                            <el-date-picker v-model="form.fyfdqsj" type="date" placeholder="选择日期"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="物业费到期动作" prop="wyfdqdz">
                            <el-select v-model="form.wyfdqdz" placeholder="请选择" style="width: 100%">
                                <el-option label="动作" value="shanghai"></el-option>
                                <el-option label="动作2" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="各类账户分开" prop="glzhfk">
                            <el-select v-model="form.glzhfk" placeholder="请选择" style="width: 100%">
                                <el-option label="分开" value="shanghai"></el-option>
                                <el-option label="分开2" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="容量费" prop="rlf">
                            <el-input v-model="form.rlf" placeholder="请输入">
                                <i slot="suffix" style="font-style: normal; margin-right: 10px; line-height: 30px; color: #1e1e1e">元</i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属系统" prop="ssxt">
                            <el-select v-model="form.ssxt" placeholder="请选择" style="width: 100%">
                                <el-option label="电控" value="shanghai"></el-option>
                                <el-option label="电控2" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否建筑节点" prop="sfjzjd">
                            <el-select v-model="form.sfjzjd" placeholder="请选择" style="width: 100%">
                                <el-option label="节点" value="shanghai"></el-option>
                                <el-option label="节点2" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="step == 2">
            <img src="../../../../../assets/images/system/room/stepTwo.png" class="titleImg" />
            <div class="addDiv">
                <span>
                    当前仪表数：<label>{{ ybList.length }}</label>
                </span>
                <custom-button type="add" @addClick="addClick" style="margin-right: 10px"></custom-button>
            </div>
            <div class="ybList">
                <div class="ybContent">
                    <div v-for="(item, index) in ybList" v-bind:key="index">
                        <div class="ybNum">第{{ index + 1 }}个仪表</div>
                        <el-form ref="formTwo" :model="item" :rules="ybRules" label-width="120px" v-bind:key="index">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="所在网关" prop="szwg">
                                        <el-select v-model="item.szwg" placeholder="请选择所在网关" style="width: 100%">
                                            <el-option label="网关1" value="shanghai"></el-option>
                                            <el-option label="网关2" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="所在通道" prop="sztd">
                                        <el-select v-model="item.sztd" placeholder="请选择所在通道" style="width: 100%">
                                            <el-option label="通道1" value="shanghai"></el-option>
                                            <el-option label="通道2" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="仪表类型" prop="yblx">
                                        <el-select v-model="item.yblx" placeholder="请选择仪表类型" style="width: 100%">
                                            <el-option label="单控表" value="shanghai"></el-option>
                                            <el-option label="单控表2" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="仪表表号" prop="ybbh">
                                        <el-input v-model="item.ybbh"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="计费方式" prop="jffs">
                                        <el-select v-model="item.jffs" placeholder="请选择计费方式" style="width: 100%">
                                            <el-option label="总读数抄表计费" value="shanghai"></el-option>
                                            <el-option label="总读数抄表计费2" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="所在支路" prop="szzl">
                                        <el-select v-model="item.szzl" placeholder="请选择所在支路" style="width: 100%">
                                            <el-option label="全部" value="shanghai"></el-option>
                                            <el-option label="所在支路2" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="电流变比" prop="dlbb">
                                        <el-input v-model="item.dlbb"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="电压变比" prop="dybb">
                                        <el-input v-model="item.dybb"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="从零计费" prop="cljf">
                                        <el-radio v-model="item.cljf" label="1">是</el-radio>
                                        <el-radio v-model="item.cljf" label="2">否</el-radio>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="起始读数" prop="qsds">
                                        <el-input v-model="item.qsds"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="能耗支路" prop="nhzl">
                                        <el-select v-model="item.nhzl" placeholder="请选择能耗支路" style="width: 100%">
                                            <el-option label="支路1" value="shanghai"></el-option>
                                            <el-option label="支路2" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="所在部门" prop="szbm">
                                        <el-select v-model="item.szbm" placeholder="请选择所在部门" style="width: 100%">
                                            <el-option label="部门1" value="shanghai"></el-option>
                                            <el-option label="部门2" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="所属分项" prop="ssfx">
                                        <el-select v-model="item.ssfx" placeholder="请选择所属分项" style="width: 100%">
                                            <el-option label="分项1" value="shanghai"></el-option>
                                            <el-option label="分项2" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </div>

                <div class="btnSave">
                    <el-button type="primary" @click="onStepOk">确定</el-button>
                    <el-button v-if="ybList.length > 0" @click="onDelete">删除</el-button>
                    <el-button @click="cancel">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {LeftTree} from '@/mockData/monitorCenter.js'
import treeSelect from '@/components/customComponents/customForm/treeSelect.vue'
import customButton from '@/components/customComponents/customForm/customButton'
const item = {
    szwg: '',
    sztd: '',
    yblx: '',
    ybbh: '',
    jffs: '',
    szzl: '',
    dlbb: '',
    dybb: '',
    cljf: '1',
    qsds: '',
    nhzl: '',
    szbm: '',
    ssfx: ''
}
export default {
    name: 'jianzhuForm',
    components: {treeSelect, customButton},
    // props: ["formData"],
    data() {
        return {
            ybList: [],
            step: 1,
            ybRules: {
                szwg: [{required: true, message: '请选择所在网关', trigger: ['blur', 'change']}],
                sztd: [{required: true, message: '请选择所在通道', trigger: ['blur', 'change']}],
                yblx: [{required: true, message: '请选择仪表类型', trigger: ['blur', 'change']}],
                ybbh: [{required: true, message: '仪表表号不能为空', trigger: ['blur', 'change']}],
                jffs: [{required: true, message: '请选择计费方式', trigger: ['blur', 'change']}],
                szzl: [{required: true, message: '请选择所在支路', trigger: ['blur', 'change']}]
            },
            rules: {
                parentId: [
                    {required: true, message: '请选择所属建筑', trigger: ['blur', 'change']}
                    // {min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur"}
                ],
                name: [{required: true, message: '房间名称不能为空', trigger: ['blur', 'change']}],
                sfcl: [{required: true, message: '请选择身份策略', trigger: ['blur', 'change']}],
                djfa: [{required: true, message: '请选择定价方案', trigger: ['blur', 'change']}],
                qybj: [{required: true, message: '请选择启用告警', trigger: ['blur', 'change']}],
                bjyz: [{required: true, message: '请选择报警阈值', trigger: ['blur', 'change']}],
                gtjf: [{required: true, message: '请选择柜台缴费', trigger: ['blur', 'change']}],
                ydcz: [{required: true, message: '请选择移动充值', trigger: ['blur', 'change']}]
            },
            isClearable: true, // 可清空（可选）
            isAccordion: false, // 可收起（可选）
            props: {
                // 配置项（必选）
                id: 'id',
                label: 'label',
                pid: 'parentId',
                children: 'children'
                // disabled:true
            },
            treeSelectList: [],
            form: {
                parentId: '',
                name: '',
                area: '',
                personNum: '',
                roomNo: '',
                xh: '',
                personName: '',
                tel: '',
                sfcl: '',
                djfa: '',
                zfsh: '',
                qybj: '1',
                bjyz: '',
                gtjf: '1',
                ydcz: '1',
                ddje: '',
                wyfdqsj: '',
                wyfdqdz: '',
                glzhfk: '',
                rlf: '',
                ssxt: '',
                sfjzjd: ''
            }
        }
    },
    computed: {},
    created() {},
    mounted() {
        this.$nextTick(() => {
            this.initData()
        })
    },
    methods: {
        onDelete() {
            this.ybList.splice(this.ybList.length - 1, 1)
        },
        addClick() {
            // 这里一定要深拷贝一下，不然会一起变化
            this.ybList.push(JSON.parse(JSON.stringify(item)))
        },
        cancel() {
            this.$emit('close', '')
        },
        initData() {
            console.log('value....')
            // let treeData = LeftTree
            // let listData = Utility.arrayFlat(treeData, (t) => t.children)
            // treeData = Utility.arrayCascade(listData, (c, p) => c.parentId == p.id)
            this.treeSelectList = LeftTree
        },
        // 树形选择器 - 取值
        getValue(value) {
            // this.valueId = value
            console.log('getValue', value, this.valueId)
        },
        onSubmit() {
            let that = this
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    console.log('111')
                    // that.$emit("close", "")
                    that.step = 2
                }
            })
        },
        onStepOk() {
            var ybList = this.ybList
            let that = this
            let isTrue = true
            ybList?.forEach((item, i) => {
                console.log(that.$refs['formTwo'][i], 'fo...')
                that.$refs['formTwo'][i].validate((valid) => {
                    if (valid) {
                        console.log('获取当前form值')
                        // that.$emit("close", "")
                    } else {
                        isTrue = false
                    }
                })
            })
            console.log(isTrue)
        }
    }
}
</script>

<style lang="scss" scoped>
.ybList {
    .ybContent {
        height: 420px;
        overflow-y: auto;
        overflow-x: hidden;
        .ybNum {
            font-size: 16px;
            color: #000;
            font-weight: bold;
            padding: 5px 0 10px 11px;
            margin-bottom: 10px;
        }
    }
    .btnSave {
        text-align: right;
    }
}
.addDiv {
    font-size: 16px;
    background-color: #f9fafc;
    height: 45px;
    line-height: 45px;
    margin-bottom: 20px;
    margin-left: 5px;
    border-radius: 2px;
    padding: 0 18px;
    text-align: right;
    display: flex;
    span {
        font-size: 16px;
        width: 150px;
        text-align: left;
        color: #777;
        label {
            font-size: 16px;
            color: #333;
        }
    }
    .customBtns {
        text-align: right;
        flex: 1;
    }
}
.titleImg {
    margin-bottom: 10px;
}
.jianzhuForm {
}
</style>
